.home-page {
  padding: 22rpx 22rpx;
  width: auto;

  .home-custom-image {
    width: 380rpx;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
  }

  .home-bar-height {
    height: var(--bar-height);
  }

  .home-title-container {
    margin-bottom: 36rpx;
    z-index: 2;
    position: relative;

    .home-main-title {
      font-size: 50rpx;
      font-weight: bold;
      height: 54rpx;
      line-height: 54rpx;
    }

    .home-sub-title {
      font-size: 28rpx;
      color: #989898;
    }
  }

  .home-calendar-container {
    background: #ffffff;
    padding: 15rpx 0 16rpx 0;
    border-radius: 20rpx;
    z-index: 2;
    position: relative;
    
    .calendar-component {
      z-index: 99;
    }

    .home-legend-container {
      display: flex;
      margin: 10rpx;
    }

    .home-item-block-sty {
      height: 22rpx;
      width: 22rpx;
      border-radius: 8rpx;
      margin: 12rpx 10rpx;
      
      // 图例颜色
      &.legend-menstrual {
        background-color: #FF80AB;
      }
      
      &.legend-predicted {
        background-color: #FFD7DB;
      }
      
      &.legend-ovulation {
        background-color: #B9A1F5;
      }
      
      &.legend-ovulation-period {
        background-color: #51E4F4;
      }
    }

    .home-item-block-text {
      height: 22rpx;
      width: auto;
      margin: 0 8rpx;
    }
  }

  .home-status-panel {
    background: #ffffff;
    padding: 20rpx;
    border-radius: 20rpx;
    margin-top: 20rpx;

    // 面板文字
    .home-panel-text {
      font-size: 36rpx;
      color: #FF5184;
      font-weight: bold;
      margin-top: 20rpx;
      margin-bottom: 32rpx
    }

    // 未来文字
    .home-future-text {
      font-size: 30rpx;
      line-height: 46rpx;
    }

    .home-bottom-option {
      height: 36px;
      line-height: 36px;
      width: 280rpx;
      display: flex;
      justify-content: start;
      align-items: center;
      margin-left: 16rpx;

      .home-label {
        font-size: 30rpx;
        display: inline-block;
        vertical-align: top;
        margin-left: 20rpx;
        line-height: 36px;
        height: 36px;
      }
    }

    // 分段器样式
    .home-segmenter {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 36px;
      line-height: 36px;
      
      .segmenter-container {
        width: 160rpx;
      }
    }

    // 表单每一项右侧样式
    .home-right-style {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 36px;
      line-height: 36px;
      
      .status-text {
        font-size: 30rpx;
        color: #FF5184;
        font-weight: bold;
      }
    }
  }
}

.popup-page {

  .popup-context-top {
    margin: 20rpx 20rpx;

    .popup-context-top-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10rpx 20rpx 30rpx 20rpx;

      .popup-top-title-cancel {
        font-size: 30rpx;
        color: #656565
      }

      .popup-top-title-center {
        font-size: 38rpx;
        font-weight: bold
      }

      .popup-top-title-submit {
        font-size: 30rpx;
        color: #FF5184
      }
    }
  }

  .popup-context {
    border-radius: 20rpx;
    padding: 20rpx 10rpx;
    background: #FFFFFF;
    margin-bottom: 100rpx;

    .popup-context-title {
      font-size: 32rpx;
      font-weight: bold;
      margin: 20rpx 0 10rpx 20rpx;
    }
    
    .grid-item-text {
      margin-top: 24rpx;
      font-size: 26rpx;
    }
    
    .grid-item-icon {
      padding-top: 20rpx;
    }
  }
}

.u-subsection__bar {
  background: #F3719D !important;
}

// 弹出层样式
.popup-background {
  background: #f1f1f1;
}

// 选中状态图标
.right-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 40rpx 10rpx;
  z-index: 999;
}
